<template>
  <div>
    <van-popup v-model:show="popupShow"
               round
               position="bottom"
               :style="{ height: '30%' }">
      <van-cell center
                title="循环">
        <template #right-icon>
          <van-switch v-model="$app.isLoop"
                      size="24" />
        </template>
      </van-cell>
      <van-cell center
                title="音频按钮是否显示">
        <template #right-icon>
          <van-switch v-model="$app.audioButtonShow"
                      size="24" />
        </template>
      </van-cell>
      <van-cell center
                title="清空缓存">
        <template #right-icon>
          <van-button type="primary" size="mini" @click="clearCacheHandle">清空缓存</van-button>
        </template>
      </van-cell>
    </van-popup>
    <van-sticky>
      <van-nav-bar :title="title"
                   left-text=""
                   left-arrow
                   @click-left="onClickLeft"
                   @click-right="onClickRight">
        <template #right>
          <van-icon name="setting-o"
                    size="18" />
        </template>
      </van-nav-bar>

    </van-sticky>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  name: 'TopBar',
  components: {},
  props: {
    title: {
      type: String,
      default: "default",
    },
    parentThis: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  data () {
    return {
      popupShow: false
    }
  },
  watch: {},
  computed: {},
  methods: {
    clearCacheHandle () {
      console.info('naviList', window.naviList)
      // window.bookList.chapter01_1
      window.naviList.forEach(item => {
        window.bookList[item] = null
      })
      Dialog.alert({
        title: '提示',
        message: '缓存已清空！重新自动刷新页面！',
      }).then(() => {
        // on close
        document.location.reload();
      });
    },
    onClickRight () {
      this.popupShow = true
    },
    onClickLeft () {
      // history.back()
      this.$router.push('indexPage')
    },
  },
  created () { },
  activated () { },
  mounted () { },
  beforeDestroy () { }
}
</script>

<style>
</style>